<template>
    <div class="register-base">
        <div class="container">
            <div class="base-l">
                <div class="back-row">
                    <a :href="BASE_URL">
                        <img :src="logoUrl" alt="logo">
                    </a>
                    <a :href="BASE_URL">
                    <span class="hasReg">> 已经有账号？</span>
                    <span class="go-back">返回</span>
                    </a>
                </div>
                <register-form></register-form>
                <div>
                    <span class="agreement-tip">注册代表你已同意</span>
                    <el-button type="text" @click="agreementView = true">《平台用户协议》</el-button>
                </div>
            </div>
            <div class="base-r">
                <p class="tip1">可以同时选择教师和家长的身份</p>
                <p class="tip2">其他角色、如访客、教研人员等特殊角色请联系相应平台管理员进行新增</p>
                <img  src="../../../../public/images/index.png" alt="logo">
            </div>
        </div>
        <el-dialog title="平台用户协议" 
            top="3vh"
            :visible.sync="agreementView"
            width="80%" 
            custom-class="agreementView" 
            :close-on-click-modal="false">
            <agreementVue :platformName="logoTxt"></agreementVue>
        </el-dialog>        
    </div>
</template>
<script>
import registerForm from './register-form';
import agreementVue from '../agreement';
export default {
    components: {
        registerForm,
        agreementVue,
    },
    data() {
        return {
            logoUrl:'',
            agreementView: false,
            logoTxt: sessionStorage.getItem('siteTitle'),
        };
    },
    created () {
        this.getLogo();
    },
    mounted(){
    },
    methods:{
		getLogo() {
			let success = res => {
                this.logoUrl = this.BASE_URL + res.data[0].f_logo;
			};
			this.$ajax({
				url: 'api/system/get_logo',
				method: 'get',
				params: {},
				func: { success: success }
			});
		},
    }
};
</script>
<style lang="scss">
    .register-base{
        min-height: 100vh;
        background-color: #fff;
        padding-bottom: 50px;
        .container{
            max-width: 1200px;
            display: flex;
            justify-content: space-around;
            margin: 0 auto;
        }
        .base-l{
            width: 460px;
        }
        .base-r{
            width: 385px;
            p{
                color: #666;
            }
            .tip1{
                padding-top: 230px;
            }
            .tip2{
                padding: 12px 0 180px;
            }
        }
        .back-row{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 70px 0;
        }
        .hasReg,.agreement-tip{
            color: #666;
        }
        .go-back{
            color: #348efc;
        }

    }
</style>